<template>
  <div   :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <div class="bottom-add">
      <a-input class="add-item" size="large" placeholder="请输入姓名" v-model="addAdmin.adminName"></a-input>
      <a-input class="add-item" size="large" placeholder="请输入手机号" v-model="addAdmin.adminTel"></a-input>
      <a-input class="add-item" size="large" placeholder="请输入简介" v-model="addAdmin.adminDescribe"></a-input>
      <a-button class="add-item" type="primary" size="large" @click="onAdd()">添加</a-button>
    </div>
    <a-table bordered :columns="columns" :data-source="datas" :loading="isloading" rowKey="adminId"
             :pagination="false">
      <span slot="adminName" slot-scope="text,record">
        <a-input color="blue" v-model="text" v-if="record.adminId===currentEditAdminID"></a-input>
         <template v-else>{{ text }}</template>
      </span>
      <span slot="adminDescribe" slot-scope="text,record">
          <a-input color="blue" v-model="record.adminDescribe" v-if="record.adminId===currentEditAdminID"></a-input>
         <template v-else>{{ record.adminDescribe }}</template>
      </span>
      <span slot="adminTel" slot-scope="text,record">
       <a-input color="blue" v-model="record.adminTel" v-if="record.adminId===currentEditAdminID"></a-input>
        <template v-else>{{ record.adminTel }}</template>
      </span>
      <span slot="action" slot-scope="row">
        <a-space>
          <template v-if="currentEditAdminID!==row.adminId">
            <a @click="onEdit(row)">修改</a>
            <a @click="onDele(row)">删除</a>
          </template>
          <template v-if="currentEditAdminID===row.adminId">
            <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>保存修改</span>
                  </template>
                 <a-button type="primary" size="small" icon="save" @click="onSave(row)"/>
            </a-tooltip>
              <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>重置密码</span>
                  </template>
                  <a-button type="primary" size="small" icon="lock" @click="resPwd(row)"></a-button>
             </a-tooltip>
          </template>

        </a-space>
    </span>
    </a-table>

  </div>
</template>

<script>
export default {
  name: "admin",
  data() {
    return {
      /**
       * 正在加载
       * */
      isloading: true,
      //当前正在修改的AdminID
      currentEditAdminID: '',
      //添加管理员
      addAdmin: {
        adminName: '',
        adminDescribe: '',
        adminTel: ''
      },
      datas: [],
      columns: [
        {
          title: 'adminID',
          dataIndex: 'adminId',
          key: 'adminId'

        },
        {
          title: '姓名',
          dataIndex: 'adminName',
          key: 'adminName',
          scopedSlots: {customRender: 'adminName'}


        },
        {
          title: '简介',
          dataIndex: 'adminDescribe',
          key: 'adminDescribe',
          scopedSlots: {customRender: 'adminDescribe'}

        },
        {
          title: '手机号',
          dataIndex: 'adminTel',
          key: 'adminTel',
          scopedSlots: {customRender: 'adminTel'}
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: {customRender: 'action'}
        }
      ]
    }
  },
  mounted() {
    this.getAdminAll()
  },
  methods: {
    getAdminAll() {
      this.$axios({
        method: 'get',
        url: '/admin/getAdminAll'
      }).then(res => {
        this.datas = res.data.data

        this.isloading = false
      })
    },
    onEdit(row) {
      console.log(row)
      this.currentEditAdminID = row.adminId
      this.datas = [...this.datas]
      console.log(this.currentEditAdminID)
    },
    onSave(row) {
      console.log(row)
      this.$axios({
        method: 'post',
        url: '/admin/updateAdmin',
        data: {
          "adminId": row.adminId,
          "adminName": row.adminName,
          "adminDescribe": row.adminDescribe,
          "adminTel": row.adminTel
        }
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('保存成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })
      this.datas = [...this.datas]
      this.currentEditAdminID = ''
    },
    resPwd(row) {
      this.$axios({
        method: 'get',
        url: '/admin/restPassword?adminId=' + row.adminId
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('密码重置成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })
      this.currentEditAdminID = ''
    },
    onDele(row) {
      this.$axios({
        method: 'get',
        url: '/admin/delAdmin?adminId=' + row.adminId
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('删除成功');
          this.getAdminAll()
          this.currentEditAdminID = ''
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })
    },
    onAdd() {

      if (!/^1[3456789]\d{9}$/.test(this.addAdmin.adminTel)) {
        this.$message.error('手机号格式错误')
      } else {
        this.$axios({
          method: 'post',
          url: '/admin/insertAdmin',
          data: {
            "adminName": this.addAdmin.adminName,
            "adminDescribe": this.addAdmin.adminDescribe,
            "adminTel": this.addAdmin.adminTel
          }
        }).then(res => {
          if (res.data.code === "200") {
            this.$message.success('添加成功');
            this.addAdmin.adminTel = ''
            this.addAdmin.adminDescribe = ''
            this.addAdmin.adminName = ''
            this.getAdminAll()
          } else if (res.data.code === -1) {
            this.$message.warning('权限不足');
          } else {
            this.$message.error('添加失败');
          }
        })
      }


    }

  }
}
</script>

<style scoped>
.bottom-add {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

.bottom-add .add-item {
  margin: 0 10px;
}
</style>
